<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="js/echarts.min.js"></script>
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
      document.write("test");
      var myChart = echarts.init(document.getElementById("main"));
      // var option = {
      //   // title: {
      //   //   text: "这是标题",
      //   //   left: "center",
      //   //   //top:"bottom",
      //   //   textStyle: {
      //   //     color: "red",
      //   //     fontstyle: "italic",
      //   //     fontsize: 18,
      //   //   },
      //   // },
      //   //legend: {
      //   //left: "rtght",
      //   //orient: "vertical",
      //   //top: "bottom",
      //   //},
      //   //toolbox: {
      //   //feature: {
      //   //saveAsImage: {},
      //   //restore: {},
      //   //},
      //   //},
      //   grid: [
      //     {
      //       left: "7%",
      //       width: "38%",
      //       top: "7%",
      //       height: "60%",
      //     },
      //     {
      //       right: "7%",
      //       width: "38%",
      //       top: "7%",
      //       height: "60%",
      //     },
      //   ],
      //   xAxis: [{ gridIndex: 0, min: 1, max: 20 }, { gridIndex: 1 }],
      //   yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],
      //   series: [
      //     {
      //       type: "bar",
      //       name: "bar",
      //       data: [1, 2, 3, 4, 5, 6],
      //       xAxisIndex: 0,
      //       yAxisIndex: 0,
      //     },
      //     {
      //       type: "line",
      //       name: "line_number",
      //       data: [1, 6, 7, 4, 8, 9],
      //       xAxisIndex: 1,
      //       yAxisIndex: 1,
      //     },
      //   ],
      // };
      option = {
        dataset: [
          {
            source: [
              ["Product", "Sales", "Price", "Year"],
              ["Cake", 123, 32, 2011],
              ["Cereal", 231, 14, 2011],
              ["Tofu", 235, 5, 2011],
              ["Dumpling", 341, 25, 2011],
              ["Biscuit", 122, 29, 2011],
              ["Cake", 143, 30, 2012],
              ["Cereal", 201, 19, 2012],
              ["Tofu", 255, 7, 2012],
              ["Dumpling", 241, 27, 2012],
              ["Biscuit", 102, 34, 2012],
              ["Cake", 153, 28, 2013],
              ["Cereal", 181, 21, 2013],
              ["Tofu", 395, 4, 2013],
              ["Dumpling", 281, 31, 2013],
              ["Biscuit", 92, 39, 2013],
              ["Cake", 223, 29, 2014],
              ["Cereal", 211, 17, 2014],
              ["Tofu", 345, 3, 2014],
              ["Dumpling", 211, 35, 2014],
              ["Biscuit", 72, 24, 2014],
            ],
          },
          {
            transform: {
              type: "filter",
              config: { dimension: "Year", value: 2011 },
            },
          },
          {
            transform: {
              type: "filter",
              config: { dimension: "Year", value: 2012 },
            },
          },
          {},
        ],
        series: [
          {
            type: "pie",
            radius: 50,
            center: ["50%", "25%"],
            datasetIndex: 1,
          },
          {
            type: "pie",
            radius: 50,
            center: ["50%", "50%"],
            datasetIndex: 2,
          },
        ],

        // Optional. Only for responsive layout:
        media: [
          {
            query: { minAspectRatio: 1 },
            option: {
              series: [{ center: ["25%", "50%"] }, { center: ["50%", "50%"] }],
            },
          },
          {
            option: {
              series: [{ center: ["50%", "25%"] }, { center: ["50%", "50%"] }],
            },
          },
        ],
      };
      myChart.setOption(option);
    </script>
  </body>
</html>
